<template>
  <el-pagination
    :current-page="props.page"
    :page-size="props.size"
    :page-sizes="[5, 10, 20, 30, 40]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="props.total"
    @size-change="handleSizeChange"
    @current-change="handlePageChange"
  />
</template>

<script setup lang='ts'>
import { PropType } from 'vue';
// js 类型
// const props = defineProps({
//   page: {
//     type: Number,
//     default: 0
//   },
//   size: {
//     type: Number,
//     default: 0
//   },
//   total: {
//     type: Number,
//     default: 0
//   },
//   loadData: {
//     type: Function as PropType<(...args: any[]) => void>,
//     default: () => {}
//   }
// })

// ts 类型
interface PropsType {
  page: number
  size: number
  total: number
  loadData: () => void
}

// const props = defineProps<PropsType>() // 没有默认值
const props = withDefaults(defineProps<PropsType>(), {
  page: 1,
  size: 10,
  total: 0,
  loadData: () => {}
})

// const emit = defineEmits(['update:page', 'update:size'])

// emit ts 类型
interface EmitType {
  (e: 'update:page', val: number): void
  (e: 'update:size', val: number): void
}
const emit = defineEmits<EmitType>()

const handleSizeChange = (val: number) => {
  emit('update:size', val)
  props.loadData()
}
const handlePageChange = (val: number) => {
  emit('update:page', val)
  props.loadData()
}

</script>

<style lang="scss" scoped>

</style>
